import React, { useEffect, useState } from 'react';
import s from './style.module.css';
import Button from '@knownsec/react-component/dist/Button';
import Dialog from '@knownsec/react-component/dist/Dialog';
import cn from 'classnames';
import { datetime } from '../../../common/formatter';
import EmptyData from '../empty/EmptyData';

export const SequenceIcon = {
	正常: <svg
		className={cn('vam mr5')}
		width="14px"
		height="16px"
		viewBox="0 0 14 16"
		version="1.1"
		xmlns="http://www.w3.org/2000/svg"
		xmlnsXlink="http://www.w3.org/1999/xlink"
	>
		<g
			id="资产"
			stroke="none"
			strokeWidth="1"
			fill="none"
			fillRule="evenodd"
		>
			<g
				id="Web资产列表"
				transform="translate(-693.000000, -716.000000)"
				fill="#11AB4E"
				fillRule="nonzero"
			>
				<g id="编组-2" transform="translate(693.000000, 654.000000)">
					<g id="告警记录" transform="translate(0.000000, 62.000000)">
						<path
							d="M12.044442,13.3452341 C12.5342511,13.3452341 12.9313198,13.7423029 12.9313198,14.232112 C12.9313198,14.7219211 12.5342511,15.1189898 12.044442,15.1189898 L1.40190807,15.1189898 C0.912098975,15.1189898 0.515030247,14.7219211 0.515030247,14.232112 C0.515030247,13.7423029 0.912098975,13.3452341 1.40190807,13.3452341 L12.044442,13.3452341 Z M6.72317502,3.58957805 C9.66202961,3.58957805 12.044442,5.97199042 12.044442,8.910845 L12.044442,12.4583563 L1.40190807,12.4583563 L1.40190807,8.910845 C1.40190807,5.97199042 3.78432044,3.58957805 6.72317502,3.58957805 L6.72317502,3.58957805 Z M7.61005285,5.3633337 L4.94941937,8.02396718 L6.27973611,8.02396718 L5.8362972,10.6846007 L8.49693067,8.02396718 L7.16661394,8.0230803 L7.61005285,5.3633337 Z M0.690632057,3.18161425 L0.761582283,3.22063688 L2.09189902,4.1075147 C2.28321601,4.23468651 2.34573221,4.4869146 2.23595285,4.68871488 C2.1261735,4.89051516 1.88045183,4.97506185 1.66974518,4.8835328 L1.59879495,4.84539705 L0.268478212,3.95851923 C0.0771612186,3.83134742 0.0146450237,3.57911933 0.124424377,3.37731905 C0.234203731,3.17551876 0.479925406,3.09097207 0.690632057,3.18250113 L0.690632057,3.18161425 Z M13.300261,3.34391289 C13.4187765,3.52188128 13.3934159,3.75907822 13.2399533,3.90796719 L13.1778718,3.95851923 L11.8475551,4.84539705 L11.7766049,4.8835328 C11.5800962,4.96814058 11.3511967,4.90037422 11.2324188,4.72242491 C11.1136409,4.5444756 11.1388578,4.30709119 11.2923696,4.15806674 L11.354451,4.1075147 L12.6847678,3.22063688 L12.755718,3.18250113 C12.9523949,3.0977523 13.181538,3.16567419 13.300261,3.34391289 L13.300261,3.34391289 Z M3.49493974,1.06463688 L3.5446049,1.12671833 L4.43148272,2.45703507 C4.55784216,2.64781947 4.51827636,2.90342287 4.34014831,3.04707452 C4.16202027,3.19072617 3.90383655,3.17524335 3.74415241,3.01133371 L3.69360037,2.94925226 L2.80672255,1.61893552 C2.67562046,1.42796613 2.71359236,1.16826405 2.89388194,1.02282426 C3.07417152,0.877384475 3.33602861,0.8952142 3.49493974,1.06375001 L3.49493974,1.06463688 Z M10.5163515,1.00344231 C10.6945902,1.12216527 10.7625121,1.35130838 10.6777632,1.5479853 L10.6396275,1.61893552 L9.75274967,2.94925226 L9.70308452,3.01133371 C9.55460228,3.16755538 9.31529448,3.1943921 9.13589731,3.07493984 C8.95650014,2.95548758 8.8889707,2.72434216 8.9758447,2.52709842 L9.01486732,2.45614819 L9.90174515,1.12583145 L9.95229718,1.06375001 C10.1011862,0.910287438 10.3383831,0.884926758 10.5163515,1.00344231 L10.5163515,1.00344231 Z M6.72317502,0.0420667263 C6.9373492,0.0419953499 7.12096757,0.195010661 7.15951891,0.40568666 L7.1666147,0.485505664 L7.1666147,2.25926131 C7.16703678,2.48895298 6.99199511,2.68094897 6.76324257,2.70170273 C6.53449003,2.72245649 6.32775286,2.56509769 6.28683113,2.33908032 L6.27973611,2.25926131 L6.27973611,0.485505664 C6.27973611,0.240601115 6.47827047,0.0420667263 6.72317502,0.0420667263 L6.72317502,0.0420667263 Z"
							id="形状"
						></path>
					</g>
				</g>
			</g>
		</g>
	</svg>,
	异常: <svg
		className={cn('vam mr5')}
		width="14px"
		height="16px"
		viewBox="0 0 14 16"
		version="1.1"
		xmlns="http://www.w3.org/2000/svg"
		xmlnsXlink="http://www.w3.org/1999/xlink"
	>
		<g
			id="资产"
			stroke="none"
			strokeWidth="1"
			fill="none"
			fillRule="evenodd"
		>
			<g
				id="Web资产列表"
				transform="translate(-693.000000, -716.000000)"
				fill="#F04038"
				fillRule="nonzero"
			>
				<g id="编组-2" transform="translate(693.000000, 654.000000)">
					<g id="告警记录" transform="translate(0.000000, 62.000000)">
						<path
							d="M12.044442,13.3452341 C12.5342511,13.3452341 12.9313198,13.7423029 12.9313198,14.232112 C12.9313198,14.7219211 12.5342511,15.1189898 12.044442,15.1189898 L1.40190807,15.1189898 C0.912098975,15.1189898 0.515030247,14.7219211 0.515030247,14.232112 C0.515030247,13.7423029 0.912098975,13.3452341 1.40190807,13.3452341 L12.044442,13.3452341 Z M6.72317502,3.58957805 C9.66202961,3.58957805 12.044442,5.97199042 12.044442,8.910845 L12.044442,12.4583563 L1.40190807,12.4583563 L1.40190807,8.910845 C1.40190807,5.97199042 3.78432044,3.58957805 6.72317502,3.58957805 L6.72317502,3.58957805 Z M7.61005285,5.3633337 L4.94941937,8.02396718 L6.27973611,8.02396718 L5.8362972,10.6846007 L8.49693067,8.02396718 L7.16661394,8.0230803 L7.61005285,5.3633337 Z M0.690632057,3.18161425 L0.761582283,3.22063688 L2.09189902,4.1075147 C2.28321601,4.23468651 2.34573221,4.4869146 2.23595285,4.68871488 C2.1261735,4.89051516 1.88045183,4.97506185 1.66974518,4.8835328 L1.59879495,4.84539705 L0.268478212,3.95851923 C0.0771612186,3.83134742 0.0146450237,3.57911933 0.124424377,3.37731905 C0.234203731,3.17551876 0.479925406,3.09097207 0.690632057,3.18250113 L0.690632057,3.18161425 Z M13.300261,3.34391289 C13.4187765,3.52188128 13.3934159,3.75907822 13.2399533,3.90796719 L13.1778718,3.95851923 L11.8475551,4.84539705 L11.7766049,4.8835328 C11.5800962,4.96814058 11.3511967,4.90037422 11.2324188,4.72242491 C11.1136409,4.5444756 11.1388578,4.30709119 11.2923696,4.15806674 L11.354451,4.1075147 L12.6847678,3.22063688 L12.755718,3.18250113 C12.9523949,3.0977523 13.181538,3.16567419 13.300261,3.34391289 L13.300261,3.34391289 Z M3.49493974,1.06463688 L3.5446049,1.12671833 L4.43148272,2.45703507 C4.55784216,2.64781947 4.51827636,2.90342287 4.34014831,3.04707452 C4.16202027,3.19072617 3.90383655,3.17524335 3.74415241,3.01133371 L3.69360037,2.94925226 L2.80672255,1.61893552 C2.67562046,1.42796613 2.71359236,1.16826405 2.89388194,1.02282426 C3.07417152,0.877384475 3.33602861,0.8952142 3.49493974,1.06375001 L3.49493974,1.06463688 Z M10.5163515,1.00344231 C10.6945902,1.12216527 10.7625121,1.35130838 10.6777632,1.5479853 L10.6396275,1.61893552 L9.75274967,2.94925226 L9.70308452,3.01133371 C9.55460228,3.16755538 9.31529448,3.1943921 9.13589731,3.07493984 C8.95650014,2.95548758 8.8889707,2.72434216 8.9758447,2.52709842 L9.01486732,2.45614819 L9.90174515,1.12583145 L9.95229718,1.06375001 C10.1011862,0.910287438 10.3383831,0.884926758 10.5163515,1.00344231 L10.5163515,1.00344231 Z M6.72317502,0.0420667263 C6.9373492,0.0419953499 7.12096757,0.195010661 7.15951891,0.40568666 L7.1666147,0.485505664 L7.1666147,2.25926131 C7.16703678,2.48895298 6.99199511,2.68094897 6.76324257,2.70170273 C6.53449003,2.72245649 6.32775286,2.56509769 6.28683113,2.33908032 L6.27973611,2.25926131 L6.27973611,0.485505664 C6.27973611,0.240601115 6.47827047,0.0420667263 6.72317502,0.0420667263 L6.72317502,0.0420667263 Z"
							id="形状"
						></path>
					</g>
				</g>
			</g>
		</g>
	</svg>,
}

const statusMap = {
	http_waf_error: 'ScanV扫描节点疑似被目标主机防火墙拦截，建议将扫描IP加白再进行检测。',
	http_status_error: '平台探测到疑似网站状态异常，建议检查网站状态。',
	http_code_error: '平台探测到网站状态码异常，建议检查网站状态。',
	ping_error: '平台探测到疑似目标主机服务异常，建议检查服务状态。',
};

function SequenceDialog({
	target_status = {},
	buttonText,
	title,
	subTitle = '展示最新一次检测结果',
	className,
	statusText,
	url_count
}) {
	const [visible, setVisible] = useState(false);
	const detailMap = {
		http: [
			{
				label: '检测时间',
				key: 'request_at',
				render: request_at => datetime(request_at) || '- -',
			},
			{ label: '响应状态码', key: 'status', render: status => status || '- -' },
			{
				label: '总响应时间',
				key: 'time',
				render: time => time ? time + ' ms' : '- -',
			},
			{
				label: '检测结果',
				key: 'target_status',
				// eslint-disable-next-line react/display-name
				render: target_status => (
					<span
						className={cn({
							'error-color': statusMap[target_status],
							'success-color': target_status === 'good',
						})}
					>
						{target_status
							? target_status === 'good'
								? '正常'
								: '异常'
							: '- -'}
					</span>
				),
			},
		],
		ping: [
			{
				label: '检测时间',
				key: 'detection_at',
				render: detection_at => datetime(detection_at) || '- -',
			},
			{ label: '响应主机IP', key: 'ip', render: ip => ip || '- -' },
			{
				label: '平均响应时间',
				key: 'avg_delay',
				render: avg_delay => avg_delay ? avg_delay + ' ms' : '- -',
			},
			{
				label: '发送包数量',
				key: 'packets_transmitted',
				render: packets_transmitted => packets_transmitted ? packets_transmitted + '个' : '- -',
			},
			{
				label: '接受包数量',
				key: 'packets_received',
				render: (packets_received, row) => packets_received || row?.packets_transmitted ? packets_received + '个' : '- -',
			},
			{ label: '丢包率', key: 'loss_rate', render: (loss_rate, row) => (isNaN(loss_rate) || !row?.packets_transmitted) ? '- -' : loss_rate + '%' },
			{
				label: '检测结果',
				key: 'target_status',
				// eslint-disable-next-line react/display-name
				render: (target_status, row) => (
					<span
						className={cn(target_status ? row?.packets_transmitted ? {
							'error-color': row?.loss_rate === 100,
							'success-color': row?.loss_rate < 100,
						} : 'error-color' : '')}
					>
						{target_status
							? row?.loss_rate < 100 && row?.packets_transmitted
								? '正常'
								: '异常'
							: '- -'}
						{row?.loss_rate === 100 && (
							<span>(请确认服务器是否禁止Ping)</span>
						)}
						{!row?.packets_transmitted && target_status && (
							<span>(请确认域名解析是否正常)</span>
						)}
					</span>
				),
			},
		],
	};
	useEffect(() => {
		if (visible) {
			document.querySelectorAll('.content-box').forEach(e => {
				e.scrollTop = 0
				e.scrollLeft = 0
			})
		}
	}, [visible])
	return (
		<>
			<Button
				onClick={() => setVisible(true)}
				type="text"
				className={cn('p0', className)}
			>
				{buttonText || '网络快照'}
			</Button>
			<Dialog
				title={
					<div>
						<span>{title || '网络快照'}</span>
						<span
							className="ml10 fs10 primary-color mt5"
							style={{ fontWeight: 'normal' }}
						>
							{subTitle}
						</span>
					</div>
				}
				className={s.availableDialog}
				visible={visible}
				cancelText=""
				onhide={() => {
					setVisible(false);
				}}
				onsubmit={() => {
					setVisible(false);
				}}
			>
				<div
					className="p20 content-box"
					style={{ height: 'calc(82vh - 150px)', minHeight: "calc(600px - 150px)", overflow: 'hidden auto' }}
				>
					{statusText && <div className={cn(s.bgColor, 'p10 df aic mb10')}>
						{!isNaN(url_count) && <div className='w300'>扫描URL数：{url_count}</div>}
						<div className='flex1 ell' title={statusMap[statusText] || statusText}>监测状态：{statusMap[statusText] || statusText}</div>
					</div>}
					<div className="c333 fw700 mb5">HTTP检测</div>
					<div className="df bd">
						<div className={cn(s.w330, "p10 bsbb")}>
							{detailMap.http.map(i => {
								return (
									// eslint-disable-next-line react/jsx-key
									<div className="df aic h36">
										<div className="w100 tar">{i.label}：</div>
										<div className="flex1 ell">
											{i.render(target_status?.http?.[i.key])}
										</div>
									</div>
								);
							})}
						</div>
						<div className={cn('bsbb content-box', s.detail, s.maxH30p, s.bdl)}>
							{statusMap[target_status?.http?.target_status] ? (
								<pre>{target_status?.http?.exception?.content}</pre>
							) : target_status?.http?.target_status === 'good' ? (
								<pre>{target_status?.http?.response?.content}</pre>
							) : (
								<EmptyData borderless />
							)}
						</div>
					</div>
					<div className="c333 fw700 mb5 mt20">Ping检测</div>
					<div className="df bd">
						<div className={cn(s.w330, "p10 bsbb")}>
							{detailMap.ping.map(i => {
								return (
									// eslint-disable-next-line react/jsx-key
									<div className="df aic h36">
										<div className="w100 tar">{i.label}：</div>
										<div className="flex1 ell">
											{i.render(
												target_status?.ping?.[i.key],
												target_status?.ping
											)}
										</div>
									</div>
								);
							})}
						</div>
						<div className={cn('bsbb content-box', s.detail, s.bdl)}>
							{target_status?.ping?.traffics ? <pre>{target_status?.ping?.traffics}</pre> : (
								<EmptyData className={'h100p'} borderless />
							)}
						</div>
					</div>
				</div>
			</Dialog>
		</>
	);
}
export default SequenceDialog;
